<template>
  <el-upload
      :action="UPLOAD_API"
      :show-file-list="false"
      :headers="headers"
      class="avatar-uploader"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
  >
    <div class="preview-container w-16 h-16 rounded border">
      <img
          v-if="inputValue && fileType === 'image'"
          :src="inputValue"
          class="w-full h-full object-cover"
          alt=""/>
      <div
          v-else-if="inputValue"
          class="w-full h-full flex flex-col items-center justify-center text-xs p-1"
          :class="fileTypeClass"
      >
        <el-icon class="text-lg mb-1">
          <component :is="fileTypeIcon" />
        </el-icon>
        <span class="text-center break-all">{{ fileExtension }}</span>
      </div>

      <div v-else class="upload-placeholder w-full h-full flex items-center justify-center">
        <el-icon class="text-gray-400 text-xl">
          <Plus/>
        </el-icon>
      </div>
    </div>
  </el-upload>
</template>

<script setup>
import {TOKEN_KEY, UPLOAD_API} from "@/api/_const.js";
import {ElMessage} from "element-plus";
import {computed, ref} from "vue";
import {Document, Picture, Plus, VideoPlay} from "@element-plus/icons-vue";

const headers = ref({
  'Authorization': `Bearer ${localStorage.getItem(TOKEN_KEY)}`
})
const fileType = computed(() => {
  if (!inputValue.value) return null

  const url = inputValue.value.toLowerCase()

  if (/\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(url)) return 'image'
  if (/\.pdf$/i.test(url)) return 'pdf'
  if (/\.(doc|docx)$/i.test(url)) return 'word'
  if (/\.(xls|xlsx)$/i.test(url)) return 'excel'
  if (/\.(zip|rar|7z)$/i.test(url)) return 'archive'
  if (/\.(mp4|avi|mov)$/i.test(url)) return 'video'

  return 'other'
})

const fileTypeIcon = computed(() => {
  switch (fileType.value) {
    case 'image': return Picture
    case 'pdf': return Document
    case 'video': return VideoPlay
    default: return Document
  }
})

const fileTypeClass = computed(() => {
  switch (fileType.value) {
    case 'pdf': return 'bg-red-50 text-red-600 border-red-200'
    case 'word': return 'bg-blue-50 text-blue-600 border-blue-200'
    case 'excel': return 'bg-green-50 text-green-600 border-green-200'
    case 'archive': return 'bg-yellow-50 text-yellow-600 border-yellow-200'
    default: return 'bg-gray-50 text-gray-600 border-gray-200'
  }
})

const fileExtension = computed(() => {
  if (!inputValue.value) return ''
  const matches = inputValue.value.match(/\.([0-9a-z]+)(?:[\?#]|$)/i)
  return matches ? matches[1].toUpperCase() : 'FILE'
})
const props = defineProps({
  modelValue: String,
})

const emit = defineEmits(['update:modelValue'])

const inputValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const handleSuccess = (response) => {
  if (response?.code !== 200) {
    ElMessage.error(t('操作失败'))
    return
  }
  inputValue.value = response.data
}

const beforeUpload = (file) => {
  return true
  // const isImage = ['image/jpeg', 'image/png'].includes(file.type)
  // const isSmall = file.size / 1024 / 1024 < 20
  //
  // if (!isImage) ElMessage.error('只能上传JPG/PNG图片!')
  // if (!isSmall) ElMessage.error('图片大小不能超过20MB!')
  //
  // return isImage && isSmall
}
</script>